<template>
    <div>
        <RouterView v-slot="{ Component }">
            <transition name="fade">
                <!-- 渲染layout一级路由组件的子路由 -->
                <component :is="Component" v-if="!isDestory" />
            </transition>
        </RouterView>
    </div>
</template>

<script setup lang='ts' name='Content'>
import useSettingStore from '@/store/modules/setting';
const settingStore = useSettingStore();

// 控制当前组件是否销毁重建
const isDestory = shallowRef(false);

// 监听刷新事件
watch(settingStore.getRefresh, () => {
    isDestory.value = true;
    // DOM更新后再重建组件
    nextTick(() => {
        isDestory.value = false;
    })
})
</script>

<style scoped lang='scss'>
.fade-enter-from {
    opacity: 0;
    transform: scale(0);
}

.fade-enter-active {
    transition: all .3s;
}

.fade-enter-to {
    opacity: 1;
    transform: scale(1);
}
</style>